const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    entry: path.join(__dirname,"./src/main.js"),
    output: {
        path: path.join(__dirname,"./dist"),
        filename: "bundle.js"
    },
   plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname,"./src/index.html"),
            filename: "index.html"
        }),
        new VueLoaderPlugin()
   ],
   resolve: {
       alias:
          { "vue$": "vue/dist/vue.js"}
       
   },
   module:{
       rules:[
           {
             //配置Vue组件的loader
            test:/\.vue$/,
            use:"vue-loader"
           },
           {  
             //配置css的loader
               test:/\.css$/,
               use: ["style-loader","css-loader"]
           },
           /*{  
            //配置ttf的loader
              test:/\.ttf$/,
              use: "ttf-loader"
          }*/
          {
            test:/\.js$/,
             use: "babel-loader",
             exclude:/node_modules/
            //最后一个的意思是不包含node_modules文件里面的js文件
            },
            {
                test: /\.(jpg|gif|png|jpeg|svg|ttf)$/,
                use: [
            {
                loader: "url-loader",
                //file-loader这个不用写出来 是内部的依赖
                options:{
               // name:"[hash:8]-[name].[ext]",
                //设置名称为原图片的名称和格式 可以不写hash 直接写[name].[ext]
                limit:17447,
                esModule: false
            },
           
        }
    ]
            },
            
       ]
   }
}